<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>简历</title>
    <style>
        /* 打印按钮样式 */
        #print-button {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #print-button:hover {
            background-color: #0056b3;
        }

        #crawler-container {
            position: fixed;
            top: 20px;
            left: 20px;
            display: flex;
            align-items: center;
        }

        #url-input {
            padding: 10px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        #fetch-button {
            padding: 10px 20px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #fetch-button:hover {
            background-color: #218838;
        }
    </style>
</head>

<body>
    <!-- 打印按钮 -->
    <button id="print-button" onclick="window.print()">打印简历</button>
    <!-- 爬虫输入框和按钮 -->
    <div id="crawler-container">
        <input type="text" id="url-input" placeholder="输入在线简历的 URL">
        <button id="fetch-button">爬取简历信息</button>
    </div>
    <div class="resume-container">
        <header class="header">
            <div class="header-left">
                <img src="profile.jpg" alt="头像" class="avatar">
                <h1 class="name">符嘉月</h1>
                <p class="job-intention">求职意向: Web前端岗位</p>
            </div>
            <div class="header-right">
                <p class="age">年龄: 20岁</p>
                <p class="phone">电话: 13976831049</p>
                <p class="address">现居: 海南昌江</p>
                <p class="email">邮箱: 3036889416@qq.com</p>
            </div>
        </header>
        <section class="education-background">
            <h2 class="section-title">★教育背景</h2>
            <div class="education-item">
                <span class="date">2023.09 - 2026.06</span>
                <span class="school">海南经贸职业技术学院</span>
                <span class="major">软件技术专业</span>
                <span class="degree">学士学位</span>
            </div>
        </section>

        <section class="practice-experience">
            <h2 class="section-title">♟实践经历</h2>
            <div class="experience-item">
                <span class="date">2024.07 - 2024.09</span>
                <span class="company">第四教学楼一楼ICT产业产教融合基地</span>
                <span class="position">数据标注</span>
                <ul class="experience-details">
                    <li>技能和工具: 精准识别能力、熟悉标注规则、空间感知能力、LabelImg、Labelme;</li>
                    <li>目标检测标注：用矩形框等形式标记图像中目标物体位置，如在自动驾驶图像标注里，框出车辆、行人、
                        交通标志等，助力模型识别交通场景元素 。</li>
                    <li>命名实体识别标注：标注文本里的人名、地名、机构名、特定术语等实体，
                        如在新闻文本中标出相关人物和组织，便于信息提取。</li>
                    <li>语音转文本标注：把语音内容转写成文字，是语音识别系统训练的重要基础。</li>
                    <li>动作识别标注：标记视频中人物或物体动作行为，如在体育视频里标注运动员投篮、
                        传球等动作，用于体育动作分析、行为识别。</li>
                    <li>数据预处理：对原始数据清理、格式转换等，让数据更适合标注。
                        像去除图像噪声、统一文本编码格式等 。</li>
                </ul>
            </div>
            <div class="experience-item">
                <span class="date">2024.11 - 至今</span>
                <span class="company">学生助理</span>
                <ul class="experience-details">
                    <li>在职期间，主要负责分报纸、送报纸，征订报刊的汇总；</li>
                    <li>帮助老师送资料；    </li>
                </ul>
            </div>
        </section>

        <section class="skills-certificates">
            <h2 class="section-title">✍技能&证书</h2>
            <ul class="skills-list">
                <li>通过大学英语四级考试，并取得相关技能证书;</li>
                <li>全国计算机一级（应用办公）证书和大数据应用开发（Python）
                    职业技能等级证书（初级）WPS办公用用职业技能等级证书（中级），熟悉计算机的各项操作;</li>
                <li>熟练掌握HTML前端技术,熟练掌握DIV + CSS布局。</li>
                <li>熟悉JS原生代码,具备为页面添加各种交互效果的能力。</li>
            </ul>
        </section>

        <section class="self-evaluation">
            <h2 class="section-title">✎自我评价</h2>
            <ul class="evaluation-list">
                <li>我是一个积极进取、责任心强的人，具备良好的学习能力和适应能力。在工作中，我注重细节，追求高效，能够独立完成任务，同时也擅长团队合作，善于沟通与协调。
                    我始终保持开放的心态，乐于接受新知识和挑战，能够在压力下保持冷静并找到解决方案。此外，我有较强的自我驱动力，能够主动发现问题并提出改进建议。在生活中，我乐观向上，
                    待人真诚，注重平衡工作与生活，保持健康的生活方式。我相信持续学习和自我提升是个人成长的关键，因此我会不断反思和总结，努力成为更好的自己;</li>
                <li>具备良好的沟通能力和团队合作能力，以及良好的自我管理以及时间管理能力;</li>
                <li>热爱工作，学习能力及适应能力强，对产品规划、网站规划、网站优化，产品转化及用户体验的提升感兴趣。</li>
            </ul>
        </section>
    </div>
    <script src="pc.js"></script>
    <script>
        document.getElementById('fetch-button').addEventListener('click', async () => {
            const url = document.getElementById('url-input').value;
            if (!url) {
                alert('请输入有效的 URL');
                return;
            }
            try {
                const response = await fetch('http://127.0.0.1:5000/fetch_resume', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ url })
                });
                const data = await response.json();
                if (data.error) {
                    alert(data.error);
                } else {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(data.html, 'text/html');
                    const newHeader = doc.querySelector('.header');
                    const newEducation = doc.querySelector('.education-background');
                    const newExperience = doc.querySelector('.practice-experience');
                    const newSkills = doc.querySelector('.skills-certificates');
                    const newEvaluation = doc.querySelector('.self-evaluation');

                    document.querySelector('.header').replaceWith(newHeader);
                    document.querySelector('.education-background').replaceWith(newEducation);
                    document.querySelector('.practice-experience').replaceWith(newExperience);
                    document.querySelector('.skills-certificates').replaceWith(newSkills);
                    document.querySelector('.self-evaluation').replaceWith(newEvaluation);
                }
            } catch (error) {
                alert('发生错误: ' + error.message);
            }
        });
    </script>
</body>

</html>    